<%= include ic/header.html %>
<style>
#main{width:1024px;margin:auto;text-align:center;padding-bottom:20px;}
h1{text-align:center;padding-top:50px;font-size:3rem;}
.am-cf span{line-height:40px;padding-left:1rem;}
.am-btn-primary{background:#333;border-color:#333;}
.am-btn-primary:hover, .am-btn-primary:focus{background:#000;border-color:#000;}
</style>

<div class="am-g" id="main">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
    <h1>注册</h1>
    <hr>
    <br>
    <form method="post" action="/register" class="am-form" id="mc-form" >
      <input type="hidden" name="refer" value="<%- refer %>">
      <label for="account">用户名:</label>
      <input type="text" name="username" id="account" minlength="6" maxlength="32" value="" data-foolish-msg="Required" placeholder="6-32位用户名" required>
      <br>
      <label for="account">邮箱:</label>
      <input type="email" name="email" id="email" value="" required data-foolish-msg="必填" placeholder="例如：12345@163.com">
      <br>
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" value="" minlength="6" maxlength="32"  placeholder="6-32位密码"  required data-foolish-msg="必填">
      <br />
      <label for="password">重复密码:</label>
      <input type="password" name="password2" id="password2" value="" minlength="6" maxlength="32" required data-foolish-msg="" placeholder="再一次输入6-32位密码">
      <br />
      <label for="remember-me" style="color:#e00;"><% if(error){ %><%= error %><% } %></label>
      <div class="am-cf am-text-bottom">
        <input autocomplete="false" type="submit" name="" value="提交注册" class="am-btn am-btn-primary am-btn-sm am-fr">
      </div>
    </form>
    <hr>
    <p></p>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  var $form = $('#mc-form');
  var $tooltip = $('<div id="vld-tooltip">Warn！</div>');
  $tooltip.appendTo(document.body);

  $form.validator();

  var validator = $form.data('amui.validator');

  $form.on('focusin focusout', '.am-form-error input', function(e) {
    if (e.type === 'focusin') {
      var $this = $(this);
      var offset = $this.offset();
      var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

      $tooltip.text(msg).show().css({
        left: offset.left + 10,
        top: offset.top + $(this).outerHeight() + 10
      });
    } else {
      $tooltip.hide();
    }
  });
});
</script>
